<div class="search-box">
  <form (ngSubmit)="search(form.value)" [formGroup]="form" matTooltip="{{ content.tooltip }}">
    <div class="js-form-type-search">
      <a href="{{ content.link }}" target="_blank" title="Search">
        <mat-icon>search</mat-icon>
      </a>
      <input
        matInput
        formControlName="{{ content.key }}"
        type="search"
        size="15"
        maxlength="128"
        value="{{ content.value }}"
        class="form-search"
        [matAutocomplete]="auto"
        placeholder="{{ content.placeholder }}"
      />
      <mat-autocomplete
        class="search-box-list"
        #auto="matAutocomplete"
        (optionSelected)="onSelected($event)"
      >
        @for (option of options; track trackByFn($index, option)) {
          <mat-option [value]="option.href">
            <app-link [content]="option" />
          </mat-option>
        }
      </mat-autocomplete>
    </div>
  </form>
</div>
